<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container" style="flex-wrap: wrap">
      <el-select class="filter-item" style="width: 180px" v-model="query.mo_id" placeholder="请先选择工单号" filterable
        clearable @change="research" @clear="research">
        <el-option v-for="v in orderSelect" :key="v.id" v-if="v.mo_no !== null" :label="v.mo_no" :value="v.mo_id">
        </el-option>
      </el-select>
      <el-input v-model="query.sn" style="width: 200px" class="filter-item" placeholder="SN"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="warning" plain @click="reset">重置</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent="unboundItem(v.row, v.$index)">解绑</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>
<script>
import commonMixin from '@/views/_common/mixin'
export default {
  name: 'unbound',
  mixins: [commonMixin],
  data() {
    return {
      name: 'SN物料解绑',
      apiList: this.$api.unboundSearch,
      query: {
        page: 1,
        size: 10,
        mo_id: '',
        sn: '',
      },
      tableProps: {
        border: true,
        opsColWith: 70,
        hideOperations: false,
      },
      orderSelect: [],
      columns: [
        { title: '工单编号', key: 'mo_no' },
        { title: 'SN', key: 'lot_sn' },
        { title: '物料名称', key: 'key_part_name' },
        { title: '物料编码', key: 'key_part_no' },
        { title: '绑定时间', key: 'create_time' },
        { title: '当前站点', key: 'group_name' },
        { title: '说明', key: 'remarks' },
      ],
    }
  },
  created() {
    this.getList()
    this.$request(this.$api.unboundSelect).then((res) => {
      this.orderSelect = res.list
    })
  },
  methods: {
    unboundItem(v) {
      this.$confirm('确定要解绑这条记录？').then(() => {
        this.pageLoading = true
        this.$request(this.$api.unboundId + '?' + 'vid=' + v.id, {}, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.getList()
          })
          .finally(() => {
            this.pageLoading = false
          })
      })
    },
    reset() {
      this.query.mo_id = ''
      this.query.sn = ''
    },
  },
}
</script>
